<template>
  <view class="page-wrapper">
    <view class="item">
      <view class="item-title">问题反馈类型</view>
      <view class="type-wrapper">
        <view class="item-type" v-for="(item,index) in typeList" :key="item.title" :class="{active:num==index}"
          @click="getNum(item,index)">
          {{item.title}}
        </view>
      </view>
    </view>
    <u--form labelPosition="left" ref="formRef" label-width="60px" :model="form">
      <view class="item">
        <view class="item-title">问题和意见</view>
        <view class="item-advise">
          <u-form-item prop="advise">
            <u--textarea v-model="form.advise" placeholder="请选择问题类型，并详细描述您所遇到的问题，我们将尽快解决。" count border="none"
              :maxlength="250" autoHeight ></u--textarea>
          </u-form-item>
        </view>
        <view class="upload">
            <uploadImg :width="150" :height="170" uploadText="添加图片" @handleImg="handleImg" @deleteImg="deleteImg" :maxCount='3'/>
        </view>
        <view class="hint">最多支持上传三张图片</view>
      </view>
      <view class="item">
        <view class="phone-wrapper">
          <u-form-item prop="phone" label="手机号:">
            <u--input class="f-input" type="text" border="none" placeholder="请输入手机号" v-model="form.phone" />
          </u-form-item>
        </view>
      </view>
    </u--form>
    <view class="action-bottom">
      <u-button text="提交" color="#CF1A1B" @click="handleAction"></u-button>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import uploadImg from '@/components/uploadImg.vue'
  export default {
    components: { uploadImg },
    data() {
      return {
        num: 1,
        typeCode: '2',
        typeList: [{
            title: '功能异常',
            typeCode: '1'
          },
          {
            title: '产品建议',
            typeCode: '2'
          },
          {
            title: '安全问题',
            typeCode: '3'
          },
          {
            title: '终端异常',
            typeCode: '4'
          },
          {
            title: '其他问题',
            typeCode: '5'
          },
        ],
        form: {
          advise: '',
          phone: ''
        },
        fileList: [],
        // 验证规则
        rules: {
          phone: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change', 'blur'],
            }
          ],
          advise: [{
            required: true,
            message: '请输入问题',
            trigger: ['change', 'blur'],
          }]
        }
      };
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
      this.form.phone = this.getUserInfo.mobile
    },
    computed: {
      ...mapGetters('user', ['getUserInfo']),
    },
    methods: {
      getNum(item, index) {
        this.num = index
        this.typeCode = item.typeCode
      },
      handleImg(url) {
        if(url) {
          this.fileList.push(url)
        }
      },
      deleteImg(index) {
        this.fileList.splice(index,1)
      },
      async handleAction() {
        await this.$refs.formRef.validate()
        this.$request({
          method: 'POST',
          url: '/user-center/feedback/add',
          data: {
            content: this.form.advise,
            typeCode: this.typeCode,
            backTel: this.form.phone,
            backImg: this.fileList[0],  
            backImg1: this.fileList[1], 
            backImg2: this.fileList[2],
          }
        }).then((res) => {
          if (res && res.respCode === 200) {
            uni.showToast({
              title: '提交成功',
              complete: function(res) {
                setTimeout(() => {
                  uni.navigateBack()
                }, 500)
              }
            })
          }
        }).catch((e) => {
          console.log('提交反馈失败', e)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.u-form {
    padding-bottom: 70px;
  }
  .item {
    margin-bottom: 20rpx;
    padding-bottom: 32rpx;
    background-color: #FFFFFF;

    .item-title {
      padding-top: 32rpx;
      margin-left: 32rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }

    .type-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      &::after {
        content: "";
        width: 30%;
        height: 0px;
        visibility: hidden;
      }

      .item-type {
        padding: 18rpx 0;
        margin: 18rpx 0;
        width: 30%;
        background: #F1F5FF;
        border-radius: 4rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }

      .active {
        color: #CF1A1B;
      }
    }

    .phone-wrapper {
      margin-left: 32rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .item-advise {
      padding: 20rpx;
      /deep/.u-textarea__field {
        min-height: 50px;
      }
      /deep/.u-textarea__count {
        bottom: -12px;
      }
    }

    .upload {
      margin-left: 32rpx;

      /deep/ .u-upload__button {
        margin: 0;
      }

      /deep/ .u-icon__icon {
        font-size: 40px !important;
        width: 78rpx;
        height: 68rpx;
      }

      /deep/ .u-upload__button__text {
        font-size: 22rpx;
        margin-top: 16rpx !important;
        font-weight: 400;
      }
    }

    .hint {
      margin-top: 10rpx;
      margin-left: 32rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }
  }

  .action-bottom {
    height: 70px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;

    /deep/ .u-button {
      width: 90% !important;
    }
  }

  /deep/ .u-form-item__body__right__message {
    margin-left: 0 !important;
  }
</style>